<script setup lang="ts">
import { ElMessageBox } from "element-plus";

defineOptions({
  name: "TestingComponent"
});

const callElModal = () => {
  ElMessageBox.confirm("Element-Plus模态框", "系统提示", {
    type: "warning"
  });
};
</script>
<template>
  <div class="page">
    <el-card header="Element-Plus">
      <el-alert
        type="info"
        title="Element-Plus主题配置查看 /src/config/element-var.scss"
        show-icon
        :closable="false"
      >
        <template #default>
          文档：
          <a
            href="https://element-plus.org/zh-CN/"
            target="_blank"
            class="underline"
          >
            https://element-plus.org/zh-CN/
          </a>
        </template>
      </el-alert>
      <el-space class="mt-4">
        <el-button @click="callElModal"> 模态框 </el-button>
        <el-button type="primary"> Primary </el-button>
        <el-button type="success"> Success </el-button>
        <el-button type="info"> Info </el-button>
        <el-button type="warning"> Warning </el-button>
        <el-button type="danger"> Error </el-button>
      </el-space>
    </el-card>
    <n-card title="Naive-UI" size="small" class="card">
      <n-alert
        type="info"
        title="Naive-UI主题配置查看 /src/config/naive-var.ts"
      >
        文档：
        <a
          href="https://www.naiveui.com/zh-CN/"
          target="_blank"
          class="underline"
        >
          https://www.naiveui.com/zh-CN/
        </a>
      </n-alert>
      <n-space class="mt-4">
        <n-button> Default </n-button>
        <n-button type="primary"> Primary </n-button>
        <n-button type="success"> Success </n-button>
        <n-button type="info"> Info </n-button>
        <n-button type="warning"> Warning </n-button>
        <n-button type="error"> Error </n-button>
      </n-space>
    </n-card>
  </div>
</template>

<style lang="scss" scoped>
.page {
  > * + * {
    margin-top: 12px;
  }
}
</style>
